<template>
    <div class="container" v-loading="isLoading">
      <el-card>
        <template #header>
          <el-form inline ref="searchForm">
            <el-form-item label="烟感报警器" prop="news_type">
              <el-select v-model="builingForm.equipmentId" placeholder="请选择烟感报警器">
                <el-option
                  v-for="(oVal, oIdx) of type"
                  :key="oIdx"
                  v-bind="oVal"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getList()">查询</el-button>
            </el-form-item>
          </el-form>
          <div class="table_tool">
            <el-button
              type="primary"
              @click="showAddOrEdit = true"
              >导出数据</el-button
            >
          </div>
        </template>
  
        <el-table :data="tableData" border>
          <!-- <el-table-column prop="id" label="id" /> -->
          <el-table-column prop="create_time" label="设备编号" />
          <el-table-column prop="title" label="烟感位置" />
          <el-table-column prop="sign_up_count" label="预警时间" />
          <el-table-column prop="comment_count" label="详细情况" />
        </el-table>
      </el-card>
  
      <footer class="footer">
        <el-pagination
          background
          layout="total, sizes, pager, jumper"
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="searchForm.per_page"
          :total="tableTotal"
          @size-change="changeSize"
          @current-change="changeCurrent"
        />
      </footer>
  
      
    </div>
  </template>
  
  <script>
  import API from '@/api';
  import { table, addOrEdit } from "@/utils/mixins";
  
  export default {
    mixins: [table, addOrEdit],
    
    components: {
    },
  
    data: () => ({
      isLoading: true,
      tableData:[],
      tableTotal: 0,
      type:[],
      isKey: false,
      builingForm: {
        equipmentId:"",
      },
    }),
  
    created() {
        this.isLoading=true
        this.type=[
            
            {label:"洋安家园路面烟感报警器",value:"865901055003142"},
            {label:"洋安家园9幢烟感报警器",value:"869907059437885"},
            {label:"洋安家园10幢烟感报警器",value:"869907059628038"},
            {label:"洋安家园28幢烟感报警器",value:"862149058422355"},
            {label:"洋安家园29幢烟感报警器",value:"869907059436861"},
            {label:"洋安家园30幢烟感报警器",value:"862149058366321"},
            {label:"洋安家园31幢烟感报警器",value:"862149058512601"},
            {label:"洋安家园32幢烟感报警器",value:"862149058382021"},
            {label:"洋安家园33幢烟感报警器",value:"869907059628475"},
            {label:"洋安家园34幢烟感报警器",value:"869907059629218"},
            {label:"洋安家园35幢烟感报警器",value:"862149058390636"},
            {label:"洋安家园36幢烟感报警器",value:"862149058425580"},
            {label:"洋安家园37幢烟感报警器",value:"862149058321508"},

            {label:"和雅苑2幢烟感报警器",value:"862149058386345"},
            {label:"和雅苑3幢烟感报警器",value:"862149058437080"},
            {label:"和雅苑5幢烟感报警器",value:"862149058397201"},
            {label:"和雅苑7幢烟感报警器",value:"862149058436850"},
            {label:"和风苑入口右转烟感报警器",value:"865901055009180"},
            {label:"和风苑路面烟感报警器",value:"865901055003845"},
            {label:"和风苑2幢烟感报警器",value:"862149058366198"},
            {label:"和风苑3幢烟感报警器",value:"862149058332828"},
            {label:"和风苑4幢烟感报警器",value:"862149058340821"},
            {label:"和风苑5幢烟感报警器",value:"862149058372782"},
            {label:"和风苑6幢烟感报警器",value:"869907059629242"},
            {label:"和风苑7幢烟感报警器",value:"869907059434155"},
            {label:"和风苑8幢烟感报警器",value:"862149058499924"},
        ]
        this.isLoading=false
    },
  
    methods:{
      // 获取列表
      getList(){
        let id=this.builingForm.equipmentId
        API.EquipmentDetail(id)
        .then(({data}) => {

            console.log(data)
            return 
          let consultList = data.items.map(item=>{
            return {
              id:item.id,
              title:item.title,
              qr_img:item.qr_img,
              finished:dayjs().subtract(1, 'hour').isAfter(item.end_time),
              sign_up_count:item.activity_sign_up.length,
              comment_count:item.activity_comments.length,
              create_time:item.create_time
            }
          })
          this.tableData=consultList
          this.tableTotal=data.total
        }).catch((err) => {
          this.tableData=[]
          this.tableTotal=0
        }).finally(() =>{
          this.isLoading = false;
        })
      },
  
      // 分页
      changeSize(val){
        this.searchForm.per_page = val
        this.searchForm.page = 1
        this.getList()
      },
  
      // 分页
      changeCurrent(val){
        this.searchForm.page = val
        this.getList()
      },
  
      // 创建活动
      addCommunity(){
        if(!this.builingForm.title.trim()) return this.$message.error("标题不可为空~~");
        if(!this.builingForm.organizer.trim()) return this.$message.error("主办方不可为空~~")
        if(!this.builingForm.organizer_addr.trim()) return this.$message.error("举办地不可为空~~")
        if(!this.builingForm.sign_up_start_time.trim()) return this.$message.error("报名开始时间不可为空~~")
        if(!this.builingForm.sign_up_end_time.trim()) return this.$message.error("报名结束时间不可为空~~")
        if(!this.builingForm.start_time.trim()) return this.$message.error("活动开始时间不可为空~~")
        if(!this.builingForm.end_time.trim()) return this.$message.error("活动结束不可为空~~")
        if(!this.builingForm.banner.trim()) return this.$message.error("活动图片不可为空~~")
        if(!this.builingForm.content.trim()) return this.$message.error("活动详情不可为空~~")
  
        let data={
          title:this.builingForm.title,
          organizer:this.builingForm.organizer,
          organizer_addr:this.builingForm.organizer_addr,
          sign_up_max:this.builingForm.sign_up_max,
          is_top:this.builingForm.is_top,
          is_comment:this.builingForm.is_comment,
          comment_check:this.builingForm.comment_check,
          is_sign_up:this.builingForm.is_sign_up,
          sign_up_start_time:this.builingForm.sign_up_start_time,
          sign_up_end_time:this.builingForm.sign_up_end_time,
          is_sign_in:this.builingForm.is_sign_in,
          sign_up_score:this.builingForm.sign_up_score,
          start_time:this.builingForm.start_time,
          end_time:this.builingForm.end_time,
          banner:this.builingForm.banner,
          sign_in_score:this.builingForm.sign_in_score,
          sign_out_score:this.builingForm.sign_out_score,
          activity_type_id:this.builingForm.activity_type_id,
          content:this.builingForm.content
        }
  
  
        if(this.builingForm.$id){
          let id=this.builingForm.$id
          API.editCommunityAct(id,data)
            .then(({data}) => {
              this.$message.success("编辑成功！");
            }).catch((err) => {
            }).finally(() =>{
              this.resetForm()
              this.getList()
            })
        }else{
           API.addCommunityAct(data)
            .then(({data}) => {
              this.$message.success("编辑成功！");
            }).catch((err) => {
            }).finally(() =>{
              this.resetForm()
              this.getList()
            })
        }
      },
  
      resetForm(){
        this.builingForm.title=""
        this.builingForm.organizer=""
        this.builingForm.organizer_addr=""
     
        this.builingForm.content=""
        this.showAddOrEdit=false
      },
  
    }
  };
  </script>
  
  <style lang="scss" scoped>
     ::v-deep{
      .el-message-box{
        min-width:400px;
      }
      .el-dialog{
        margin-top:2vh !important;
      }
      .el-input .el-input__inner{
        border-radius:4px !important;
      }
      .el-switch{
        transform:translateY(6px)
      }
      .el-message-box__message{
        position: absolute !important;
        top:50% !important;
        left:40px !important;
      }
      .el-form-item__label{
        font-size:16px !important;
      }
    }
  </style>
  